<script setup>
import {
  GetInspecAPI,
  GetHoursInfoAPI,
  GetdocumentStaticsAPI,
  GetsevenDayYieldAPI,
  GettopFiveBadAPI
} from '@/api/statement/quality/quality.js'

import MonthBad from './monthBad.vue'
import lineChart from './lineChart.vue'
import { onMounted } from 'vue'
const titleS = ref('')
const timer = ref()
// 顶部表单数据
const inSpecForm = reactive({
  loading: false,
  sumInspection: '',
  checkInspection: '',
  auditInspection: '',
  pendingInspection: '',
  overdue: ''
})

// 进度条百分比
const percentage = reactive({
  openProbability: 0, //绿色
  offRate: 0, //蓝色
  failureRate: 0 //黄色
})

// 进度条颜色
const colors = reactive({
  green: '#9aea53',
  blur: '#1f99fa',
  yellow: '#fff43d'
})

// 待操作单据统计表格
const dataList = ref([])
const tabConfigRef = ref(null)
// 48小时轮播表
const TabConfig = reactive({
  loading: false,
  header: [
    '送检阶别',
    '送检部门',
    '送检产线',
    '送检时间',
    '检验单号',
    '状态',
    '检验结果',
    '物料编号',
    '物料名称',
    '检验进度'
  ],
  data: [],
  columnWidth: [150],
  align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center'],
  headerBGC: '#05112b',
  oddRowBGC: '#05112b',
  evenRowBGC: '#05112b',
  index: false, //序号
  rowNum: 5 //表行数
})

// 检验单据统计
const GetInspec = async () => {
  try {
    const { data: res } = await GetInspecAPI()
    for (let key in res) {
      inSpecForm[key] = res[key]
    }
    percentage.openProbability = Math.ceil(Number(res.checkInspection * 100) / Number(res.sumInspection))
    percentage.offRate = Math.ceil(Number(res.auditInspection * 100) / Number(res.sumInspection))
    percentage.failureRate = Math.ceil(Number(res.pendingInspection * 100) / Number(res.sumInspection))
  } catch (error) {
  } finally {
  }
}

// 48小时内检验单据信息
const GetHoursInfo = async () => {
  try {
    const res = await GetHoursInfoAPI()
    let arr = []
    res.data.forEach(item => {
      arr.push([
        item.itemRank,
        item.inspectDept,
        item.productionLine,
        item.createTime,
        item.inspectionSheetNo,
        item.status,
        item.inspectionResults,
        item.materialCode,
        item.materialName,
        `
          <div>
      <div>
        <div style="  width: 90%;  border-radius: 45px;margin-top:0.7rem ;height: 1rem; position: relative; background-color: #89bae4;">
          <div style="height: 100%;
           width: ${item.inspectionPlan >= 100 ? 100 : item.inspectionPlan <= 0 ? 100 : item.inspectionPlan}%;
           display: flex;
          justify-content: center;
          align-items: center ;
          font-weight: 800;
          border-radius: 45px;
          color:#fff;
          background-color: ${item.inspectionPlan >= 100 ? '#71be55' : '#89bae4'};
      position: absolute; top: 0; left: 0px;" >${item.inspectionPlan >= 100 ? 100 : item.inspectionPlan}%</div>

        </div>
      </div>
    </div>
    `
      ])
    })

    TabConfig.data.length > 0 ? tabConfigRef.value.updatas(arr) : (TabConfig.data = arr)
  } catch (error) {
    console.log(error)
  } finally {
  }
}

// 待操作单据统计
const GetdocumentStatics = async () => {
  try {
    const res = await GetdocumentStaticsAPI()
    dataList.value = res.data
  } catch (error) {
  } finally {
  }
}

// 近7天合格率趋势
const sevenDayYield = reactive({
  xAxisData: [],
  yAxisData: []
})
const GetsevenDayYield = async () => {
  try {
    const { data: res } = await GetsevenDayYieldAPI()
    sevenDayYield.xAxisData = res.riQi
    sevenDayYield.yAxisData = [res.faiYield, res.fqcYield, res.ipqcYield, res.iqcYield, res.oqcYield]
  } catch (error) {
  } finally {
  }
}

const objData = reactive({
  FAI: [],
  IQC: [],
  FQC: [],
  IPQC: [],
  OQC: []
})

const topFiveBadRef = ref(null)
const pancakeDataTimer = ref(null)
// 近30天前五大不良
const GettopFiveBad = async () => {
  //清除定时器
  clearInterval(pancakeDataTimer.value)
  try {
    const { data: res } = await GettopFiveBadAPI()
    //先过滤掉不是FAI的数组再循环返回一个新数组
    objData.FAI = res.topFiveBadDto
      .filter(item => item.itemRank == 'FAI')
      .map(item => ({
        name: item.badName,
        value: item.defectiveQuantity
      }))
    objData.IQC = res.topFiveBadDto
      .filter(item => item.itemRank == 'IQC')
      .map(item => ({
        name: item.badName,
        value: item.defectiveQuantity
      }))
    objData.FQC = res.topFiveBadDto
      .filter(item => item.itemRank == 'FQC')
      .map(item => ({
        name: item.badName,
        value: item.defectiveQuantity
      }))
    objData.IPQC = res.topFiveBadDto
      .filter(item => item.itemRank == 'IPQC')
      .map(item => ({
        name: item.badName,
        value: item.defectiveQuantity
      }))
    objData.OQC = res.topFiveBadDto
      .filter(item => item.itemRank == 'OQC')
      .map(item => ({
        name: item.badName,
        value: item.defectiveQuantity
      }))
    //得到5个新数组后用arr存储
    const arr = []

    //自定义一个标题数组
    const arrTitle = []

    // 过滤空数组
    for (let key in objData) {
      if (objData[key].length > 0) {
        arr.push(objData[key])
        arrTitle.push(key)
      }
    }

    //定义一个arr数组的下标值
    let i = 1
    let tiemt = 5000
    topFiveBadRef.value.initData(arr[0])
    titleS.value = arrTitle[0]
    pancakeDataTimer.value = setInterval(() => {
      //如果执行arr的长度时候，让i从0开始再往下执行
      if (i >= arr.length) i = 0
      //有数据时，执行到第i个数组，就把当前数组的arrTitle赋值给当前标题
      titleS.value = arrTitle[i]
      //有数据时，执行到第i个数组，就把当前数组的数据赋值给当前饼图数据
      topFiveBadRef.value.initData(arr[i])
      i++
    }, tiemt)
  } catch (error) {}
}

watch(
  () => titleS.value,
  val => {},
  {
    deep: true,
    immediate: true
  }
)

// 10秒一刷
const staer = () => {
  GettopFiveBad()
  GetsevenDayYield()
  GettopFiveBad()
  GetInspec()
  GetHoursInfo()
  GetdocumentStatics()
}

timer.value = setInterval(() => {
  staer()
}, 50000)
staer()

onUnmounted(() => {
  clearInterval(timer.value)
  timer.value = ''
})
</script>
<template>
  <dv-full-screen-container class="box">
    <!-- 头部 -->
    <div class="header">
      品质检验看板
      <img class="logo" src="../../../assets/logo/logo-03.png" />
    </div>
    <div class="middle">
      <!--顶部 -->
      <div class="middle-top">
        <dv-border-box7>
          <div class="inSpec">检验单据统计:</div>
          <div class="top-one">
            <div class="top-one-boder">
              <div class="left">
                <div>
                  <div class="wenzi">检验单据总数:</div>
                  <div class="wenzi">（48小时内）</div>
                </div>
                <div class="shuzi">{{ inSpecForm.sumInspection }}</div>
              </div>
            </div>
            <div class="top-two-boder">
              <div class="count">
                <div class="count-common">
                  <div>
                    <div class="wenzi">待检验</div>
                    <div class="wenzi">
                      单据数: <span class="wenziSpan">{{ inSpecForm.checkInspection }}</span>
                    </div>
                  </div>
                  <div>
                    <el-progress
                      type="circle"
                      class="percent"
                      :percentage="percentage.openProbability"
                      show-text
                      :stroke-width="20"
                      :color="colors.green"
                    >
                    </el-progress>
                  </div>
                </div>
                <div class="count-common">
                  <div>
                    <div class="wenzi">待审核</div>
                    <div class="wenzi">
                      单据数: <span class="wenziSpan">{{ inSpecForm.auditInspection }}</span>
                    </div>
                  </div>
                  <div>
                    <el-progress
                      type="circle"
                      class="percent"
                      :percentage="percentage.offRate"
                      show-text
                      :stroke-width="20"
                      :color="colors.blur"
                    >
                    </el-progress>
                  </div>
                </div>
                <div class="count-common">
                  <div>
                    <div class="wenzi">待处理</div>
                    <div class="wenzi">
                      单据数: <span class="wenziSpan">{{ inSpecForm.pendingInspection }}</span>
                    </div>
                  </div>
                  <div>
                    <el-progress
                      type="circle"
                      class="percent"
                      :percentage="percentage.failureRate"
                      show-text
                      :stroke-width="20"
                      :color="colors.yellow"
                    >
                    </el-progress>
                  </div>
                </div>
              </div>
            </div>
            <div class="top-three-boder">
              <div class="right">
                <div class="left">
                  <div>
                    <div class="wenzi">逾期未检验单:</div>
                    <div class="wenzi">（48小时外）</div>
                  </div>
                  <div class="shuzi">{{ inSpecForm.overdue }}</div>
                </div>
              </div>
            </div>
          </div>
        </dv-border-box7>
      </div>
      <!-- 中间 -->
      <div class="middle-centre">
        <dv-border-box7>
          <div class="inSpec">48小时内检验单据信息:</div>
          <div class="tabClass">
            <dv-scroll-board ref="tabConfigRef" :config="TabConfig" style="height: 250px" @mouseover="handleChange" />
          </div>
        </dv-border-box7>
      </div>
      <!-- 底部 -->
      <div class="middle-bottom">
        <div class="middle-bottom-left">
          <dv-border-box7>
            <div class="inSpec">待操作单据统计:</div>
            <div class="tabClass daicuozuo">
              <el-table
                :data="dataList"
                style="width: 100%"
                :header-cell-style="{ background: '#4b68bd', color: '#83b2dc' }"
                border
              >
                <el-table-column prop="itemRank" label="" width="auto" align="center" />
                <el-table-column prop="checkInspection" label="待检验" width="auto" align="center" />
                <el-table-column prop="auditInspection" label="待审核" width="auto" align="center" />
                <el-table-column prop="pendingInspection" label="待处理" width="auto" align="center" />
              </el-table>
            </div>
          </dv-border-box7>
        </div>
        <div class="middle-bottom-count">
          <dv-border-box7>
            <div class="inSpec">近7天合格率趋势:</div>
            <lineChart
              width="100%"
              height="300px"
              :xAxisData="sevenDayYield.xAxisData"
              :yAxisData="sevenDayYield.yAxisData"
            />
          </dv-border-box7>
        </div>
        <div class="middle-bottom-bottom">
          <dv-border-box7>
            <div class="inSpec">
              近30天内前五大不良: <span>{{ titleS }}</span>
            </div>
            <MonthBad width="100%" height="300px" ref="topFiveBadRef" class="eacharts" />
          </dv-border-box7>
        </div>
      </div>
    </div>
  </dv-full-screen-container>
</template>

<style lang="scss" scoped>
.box {
  background: #101c30;
  padding-bottom: 1.875rem !important;
}
.header {
  position: relative;
  font-size: 2.85rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  height: 6rem;
  background-image: url(../../../assets/images/kb-header.png);
  background-size: cover;
  // background-position: 0 -1.875rem;

  img {
    position: absolute;
    left: 0;
    width: 20.25rem;
    height: 5.25rem;
  }
}
.middle {
  height: 100%;
  display: flex;
  flex-direction: column;
  // 顶部
  .middle-top {
    display: flex;
    height: 25%;
    flex-direction: column;
  }
  .middle-centre {
    display: flex;
    height: 30%;
  }
  .middle-bottom {
    display: flex;
    flex-direction: row;
    height: 35%;
  }
}

// 检验单据统计
.top-one {
  height: 80%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  // 左边和右边内容
  .left {
    height: 9.375rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
  }

  // 中间内容
  .count {
    height: 9.375rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    .count-common {
      display: flex;
      flex-direction: row;
      align-items: center;
      .wenziSpan {
        display: inline-block;
        width: 5rem /* 80/16 */;
        font-size: 1.5rem;
        color: #8abbe5;
      }
    }
  }
}

// 第一层文字样式
.wenzi {
  font-size: 1.5rem;
  color: #8abbe5;
}

// 第一层数字样式
.shuzi {
  font-weight: 800;
  font-size: 2.25rem;
  color: #fff;
}

// 文字颜色
.inSpec {
  color: #1b99d7;
  padding: 0.9375rem;
}
.top-one-boder {
  flex: 0.5;
  border: 0.125rem solid #5f626a;
  margin: 0 0.9375rem 0 0.9375rem;
}
.top-two-boder {
  flex: 1;
  border: 0.125rem solid #5f626a;
  margin: 0 0.9375rem 0 0.9375rem;
}
.top-three-boder {
  flex: 0.5;
  border: 0.125rem solid #5f626a;
  margin: 0 0.9375rem 0 0.9375rem;
}

.middle-bottom-left {
  flex: 1;
}
.middle-bottom-count {
  flex: 1;
}
.middle-bottom-bottom {
  flex: 1;
}

.middle-top,
.middle-centre,
.middle-bottom {
  margin: 0 0.9375rem;
}
.middle-centre {
  margin: 0.9375rem 0.9375rem;
}
.middle-bottom-left {
  margin: 0 0.9375rem 0 0;
}
.middle-bottom-bottom {
  margin: 0 0 0 0.9375rem;
}

.tabClass {
  margin-left: 0.9375rem;
  margin-right: 0.9375rem;
  height: 83%;
  display: flex;
  align-items: center;
}

// 更改表头背景颜色
.tabClass ::v-deep .el-table thead tr > th {
  background-color: #111b2a !important;
}
// 更改表格每行背景颜色
.tabClass ::v-deep .el-table {
  background-color: #111b2a !important;
}

.tabClass ::v-deep .el-table tbody tr > td {
  background-color: #111b2a !important;
  color: #83b2dc;
}

.daicuozuo {
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}
// 轮播表样式

.tabClass ::v-deep .header-item {
  color: #89bae4;
}
.tabClass ::v-deep .header-item {
  color: #89bae4;
}

.tabClass ::v-deep .row-item {
  color: #89bae4;
}

// 修改圆环内部文字
::v-deep .percent .el-progress__text {
  color: #fff;
  font-weight: 800;
}
</style>
